<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <el-scrollbar height="83vh" class="w-full h-full rounded-lg">
      <div class="w-full flex flex-col h-128">
        <div
          class="w-full mt-4 bg-white h-full rounded-lg"
          id="iframChart"
        ></div>
      </div>
      <div class="flex flex-row justify-between my-4">
        <el-input
          v-model="search"
          placeholder="根据标题进行搜索"
          prefix-icon="el-icon-search"
          @change="searchChange"
        ></el-input>
      </div>
      <vxe-table
        align="center"
        :data="listData"
        :loading="loading"
        round
        border
      >
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="id" :visible="false"> </vxe-column>
        <vxe-column field="title" title="标题"></vxe-column>
        <vxe-column field="type" title="类型"></vxe-column>
        <vxe-column title="操作" width="100" show-overflow>
          <template #default="{ row }">
            <vxe-button
              type="text"
              icon="fa fa-search"
              @click="checkEvent(row)"
            ></vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="flex flex-row justify-between mt-4">
        <el-button :disabled="!pageInfo.hasPre" @click="prePage"
          >上一页</el-button
        >
        <p>{{ pageInfo.current }}</p>
        <el-button :disabled="!pageInfo.hasNext" @click="nextPage"
          >下一页</el-button
        >
      </div>
    </el-scrollbar>
  </div>
  <el-dialog
    title="成果详情"
    v-model="showDialog1"
    destroy-on-close
    width="100%"
    top="0"
  >
    <re-staff-award-detail :awardId="selectAwardId"></re-staff-award-detail>
  </el-dialog>
</template>

<script lang="ts">
import { useEventListener, useTimeoutFn, tryOnUnmounted } from "@vueuse/core";
import { nextTick, reactive } from "vue";
import { computed, onMounted, ref } from "vue-demi";
import {
  AwardAnalysisTypeDTO,
  AwardInsertDTO,
  getStaffAwardAnalysis,
  getStaffAwardAnalysisLimitByDate,
  getStaffAwards,
  getStaffAwardsLimitByDate
} from "/@/api/award";
import echarts from "/@/plugins/echarts";
import { useAwardStoreHook } from "/@/store/modules/award";
import ReStaffAwardDetail from "/@/components/ReStaffAwardDetail/index.vue";
let iframChart: any = null;
export default {
  components: {
    ReStaffAwardDetail
  },
  setup() {
    const awardStore = useAwardStoreHook();
    const loading = ref(true);
    const staffId = computed({
      get: () => awardStore.staffId,
      set: value => awardStore.setStaffId(value)
    });
    const startTime = computed({
      get: () => awardStore.startTime,
      set: value => awardStore.setStartTime(value)
    });
    const endTime = computed({
      get: () => awardStore.endTime,
      set: value => awardStore.setEndTime(value)
    });
    const listData = ref<AwardInsertDTO[]>([]);
    const awardAnalysisByType = ref<AwardAnalysisTypeDTO[]>([]);
    const awardList = ref<AwardInsertDTO[]>([]);

    const showDialog = ref(false);
    const selectAwardId = ref(1);

    const search = ref("");
    const searchChange = () => {
      let inputList = [];
      if (search.value !== null && search.value.length !== 0) {
        awardList.value.forEach(item => {
          if (item.title.indexOf(search.value) >= 0) {
            inputList.push(item);
          }
        });
      } else {
        inputList = awardList.value;
      }
      getListData(inputList);
    };
    const checkEvent = row => {
      selectAwardId.value = row.id;
      showDialog.value = true;
    };

    const pageInfo = reactive({
      hasNext: false,
      hasPre: false,
      current: 1,
      size: 10
    });
    const getListData = (inputList: AwardInsertDTO[]) => {
      const start = (pageInfo.current - 1) * 10;
      let end = pageInfo.current * 10 - 1;
      if (end >= inputList.length - 1) {
        end = inputList.length - 1;
        pageInfo.hasNext = false;
      } else {
        pageInfo.hasNext = true;
      }
      if (start !== 0) {
        pageInfo.hasPre = true;
      } else {
        pageInfo.hasPre = false;
      }
      listData.value = [];
      for (let i = start; i <= end; i++) {
        listData.value.push(inputList[i]);
      }
    };
    const prePage = () => {
      if (pageInfo.hasPre) {
        pageInfo.current--;
        if (search.value !== null && search.value.length !== 0) {
          searchChange();
        } else {
          getListData(awardList.value);
        }
      }
    };
    const nextPage = () => {
      if (pageInfo.hasNext) {
        pageInfo.current++;
        if (search.value !== null && search.value.length !== 0) {
          searchChange();
        } else {
          getListData(awardList.value);
        }
      }
    };

    const initAnalysisData = async () => {
      let res = null;
      if (awardStore.startTime !== null) {
        res = await getStaffAwardAnalysisLimitByDate(
          staffId.value,
          startTime.value,
          endTime.value
        );
      } else {
        res = await getStaffAwardAnalysis(staffId.value);
      }
      if (res.code === 1) {
        awardAnalysisByType.value = res.response;
        flushTable();
      }
    };
    const initStaffAwardList = async () => {
      let res = null;
      if (awardStore.startTime !== null) {
        res = await getStaffAwardsLimitByDate(
          staffId.value,
          startTime.value,
          endTime.value
        );
      } else {
        res = await getStaffAwards(staffId.value);
      }
      if (res.code === 1) {
        awardList.value = res.response;
      }
    };
    const initData = async () => {
      await initAnalysisData();
      await initStaffAwardList();
      getListData(awardList.value);
      loading.value = false;
    };
    const flushTable = () => {
      const chart = document.getElementById("iframChart");
      if (!chart) return;
      iframChart = echarts.init(chart);
      iframChart.clear();
      const legendData = [];
      const seriesDate = [];
      awardAnalysisByType.value.forEach(item => {
        legendData.push(item.type);
        seriesDate.push({ name: item.type, value: item.num });
      });
      iframChart.setOption({
        title: {
          text: "按类型统计",
          top: "20",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 0,
          top: 20,
          bottom: 20,
          data: legendData
        },
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: seriesDate,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    };

    onMounted(() => {
      initData();
      nextTick(() => {
        useEventListener("resize", () => {
          if (!iframChart) return;
          useTimeoutFn(() => {
            iframChart.resize();
          }, 180);
        });
      });
    });

    tryOnUnmounted(() => {
      if (iframChart) {
        iframChart.dispose();
        iframChart = null;
      }
    });

    return {
      staffId,
      startTime,
      endTime,
      loading,
      listData,
      awardAnalysisByType,
      prePage,
      nextPage,
      pageInfo,
      search,
      showDialog1: showDialog,
      selectAwardId,
      searchChange,
      checkEvent
    };
  }
};
</script>

<style scoped></style>
